﻿<!-- 修改于2024-05-10 新增无效数据标红展示 -->
<style>
.value-invalid .el-input__inner{
  color:red;
}
</style>
<template>
  <el-select v-loading="isLoading"
             :class="id&&dataMap&&!dataMap[id]?'value-invalid':''"
               v-model="id"
               clearable
               filterable
             :readonly="readonly"
             :multiple="multiple"
              :disabled="disabled"
             :placeholder="placeholder"
             :size="size"
               @change="updateValue">
    <el-option v-for="item in dataList" :key="item[valueKey]" :value="item[valueKey]" :disabled="item.disabled" :label="item.name"></el-option>
  </el-select>
</template>
<script>
function noop() {}
export default {
  name: "DataSelect",
  props: {
    requestMethod:{
      type:String,
      default:'get'
    },
    //选中值
    value:{},
    //父级值
    parent:{},
    dataUrl: {},//数据接口
    data:{
      type:Array,
      default:()=>{return []}
    },//数据列表
    //数据id属性
    valueKey:{
      type:String,
      default:'id'
    },
    //提示信息
    placeholder:{},
    //是否禁用
    disabled:{
      type:Boolean,
      default:false
    },
    //是否可多选
    multiple:{
      type:Boolean,
      default:false,
    },
    //是否只读
    readonly:{
      type:Boolean,
      default:false,
    },
    //默认选中项
    defaultSelect:{
      type:String,
      default:null,
    },
    //参数数据，用于替换url中的请求参数数据
    paramData:{
      type:Object,
      default:null,
    },
    size:{
      type:String,
      default:'small'
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  },
    data(){
      return {
          dataList:[],
        dataMap:null,
          isLoading:true,
        //当前实际数据url
        currentDataUrl:'',
      }
    },
  computed:{
    id:{
      get(){
        return this.value;
      },
      set(value){
        this.$emit("change",value);
      }
    }
  },
  watch:{
    data(){
      this.loadDataList();
    },
    dataUrl(){
      this.loadDataList();
    },
    disabled(){
      this.loadDataList();
    },
    parent(){
      this.loadDataList();
    },
    paramData() {
      if(this.dataUrl&&this.dataUrl.indexOf('${')>=0) {
        this.loadDataList();
      }
    }
  },
  mounted(){
    this.loadDataList();
  },
  methods: {
    updateValue(val){
      this.$emit('input', val)
      this.$emit('change', val)
    },
    loadDataList: function () {
      this.isLoading = true;
      if(!this.dataUrl){
        this.currentDataUrl = null;
        this.dataList = this.data;
        if(this.dataList) {
          let map = {};
          for(let item of this.dataList) {
            map[item[this.valueKey]] = item;
          }
          this.dataMap = map;
        }
        // this.refreshValue(this.dataList);
        this.$emit("load",this.dataList,this);
        this.isLoading = false;
        this.updateDefaultSelect();
        return;
      }
      let url = this.dataUrl;
      if(this.paramData&&this.dataUrl.indexOf('${')>=0) {
        //将url中的参数值占位符替换为数据
        for(let key in this.paramData) {
          url = url.replace('${'+key+'}',this.paramData[key]);
        }
      }
      if(this.currentDataUrl == url) {
        //如果变化后的url与当前url相同，则不进行重新加载
        this.isLoading = false;
        this.$emit("load",this.dataList,this);
        return;
      }
      this.currentDataUrl = url;
      if(this.requestMethod&&this.requestMethod.toLowerCase()=='post') {
        let paramData = {};
        if(this.paramData) {
          paramData = JSON.parse(JSON.stringify(this.paramData));
        }
        paramData.pageSize = -1;
        this.$post(url, paramData, (response) => {
          this.dataList = response.data;
          this.updateDefaultSelect();
          this.$emit("load", response.data, this);
        }, () => {
          this.isLoading = false;
        })
      } else {
        this.$get(url, {pageSize: -1}, (response) => {
          this.dataList = response.data;
          this.updateDefaultSelect();
          this.$emit("load", response.data, this);
        }, () => {
          this.isLoading = false;
        })
      }
    },
    //未设置值时选中默认值
    updateDefaultSelect() {
      if(this.value==null||this.value==undefined||this.value=='') {
        //默认值选中
        if(this.defaultSelect=='first'&&this.dataList&&this.dataList.length>0) {
          this.value = this.dataList[0][this.valueKey];
          this.updateValue(this.value);
        }
      }
    },
    //更新值
    // refreshValue(dataList){
      // if(!dataList||dataList.length<1) {
      //   this.value = null;
      // }
      // let matched = false;
      // for(let item of dataList) {
      //   if(this.value == item[this.valueKey]) {
      //     matched = true;
      //     break;
      //   }
      // }
      // if(matched == false) {
      //   this.value = null;
      // }
    // },
    getNameMap() {
      let map = {};
      for(let item of this.dataList) {
        map[item[this.valueKey]] = item.name;
      }
      return map;
    },
    getDataMap() {
      let map = {};
      for(let item of this.dataList) {
        map[item[this.valueKey]] = item;
      }
      return map;
    }
  }
};
</script>
